<template>
	<view>
		<topic-info :item='topicinfo'/>
		<!-- tab栏切换 -->
		<swiper-tab-head 
		:tabIndex='tabIndex' 
		:tabs='tabBar'
		scrollItemStyle='width: 50%'
		srcollStyle='border-bottom: 0'
		@tab-click='handleTabItemClick' />
		
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in tablist" :key='index'>
				<!-- 列表 -->
				<template v-if="index == tabIndex">
					<block v-for="(list, listindex) in item.list">
						<common-list :item="list" :index="listindex"/>
					</block>
					<!-- 上拉加载更多 -->
					<load-more :loadtext="item.loadtext" v-if="index == tabIndex"/>
				</template>
				
			</block>
		</view>
	</view>
</template>

<script>
	import TopicInfo from "../../components/topic/topic-info.vue"
	import SwiperTabHead from '../../components/index/swiper-tab-head.vue'
	import CommonList from '../../components/common/common-list.vue'
	import LoadMore from '../../components/common/load-more.vue'
	import NoThing from '../../components/common/no-thing.vue'
	export default {
		components:{
			TopicInfo,
			SwiperTabHead,
			LoadMore,
			NoThing,
			CommonList
		},
		data() {
			return {
				topicinfo: {
					titlepic: "/static/demo/topicpic/13.jpeg",
					title: "忆往事 敬余生",
					desc: "我是描述",
					totalnum: 500,
					todaynum: 100
					
				},
				tabIndex: 0,
				tabBar: [
					{
						name: "默认",
						id: "moren"
					},
					{
						name: "最新",
						id: "zuixin"
					}
				],
				tablist: [
					{
						loadtext: "上拉加载更多",
						list: [
							{
								userpic: "/static/demo/userpic/12.jpg",
								username: "风吹屁屁凉",
								sex: 1, // 0 男 1 女
								age:25,
								isguanzhu: false,
								title: "我是标题哦",
								titlepic: "/static/demo/datapic/13.jpg",
								video: false,
								share:false,
								path: "深圳·龙岗",
								sharenum: 20,
								commentnum:30,
								goodnum: 40		
							},{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "",
							video: false,
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						},
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "/static/demo/datapic/13.jpg",
							video: {
								looknum: "20w",
								long: "2:47"
							},
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [
							{
								userpic: "/static/demo/userpic/12.jpg",
								username: "风吹屁屁凉",
								sex: 0, // 0 男 1 女
								age:25,
								isguanzhu: false,
								title: "我是标题哦",
								titlepic: "/static/demo/datapic/13.jpg",
								video: {
									looknum: "20w",
									long: "2:47"
								},
								share:false,
								path: "深圳·龙岗",
								sharenum: 20,
								commentnum:30,
								goodnum: 40		
							},
							{
								userpic: "/static/demo/userpic/12.jpg",
								username: "风吹屁屁凉",
								sex: 0, // 0 男 1 女
								age:25,
								isguanzhu: false,
								title: "我是标题哦",
								titlepic: "/static/demo/datapic/13.jpg",
								video: {
									looknum: "20w",
									long: "2:47"
								},
								share:false,
								path: "深圳·龙岗",
								sharenum: 20,
								commentnum:30,
								goodnum: 40		
							}
						]
					}
				]
			}
		},
		onReachBottom() {
			this.handleScrolltolower()
		},
		// 监听下拉刷新动作
		onPullDownRefresh() {
			this.inintData()
		},
		methods: {
			// 初始化获取数据
			
			inintData() {
				setTimeout(()=> {
					let array = 
						 [
							{
								userpic: "/static/demo/userpic/12.jpg",
								username: "111风吹屁屁凉",
								sex: 1, // 0 男 1 女
								age:25,
								isguanzhu: false,
								title: "我是标题哦221212",
								titlepic: "/static/demo/datapic/13.jpg",
								video: false,
								share:false,
								path: "深圳·龙岗",
								sharenum: 20,
								commentnum:30,
								goodnum: 40		
							},{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "",
							video: false,
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						},
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "/static/demo/datapic/13.jpg",
							video: {
								looknum: "20w",
								long: "2:47"
							},
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						}
						]
					this.tablist[this.tabIndex].list = array
					uni.stopPullDownRefresh()
				}, 10000)
			},
			// 上拉加载
			handleScrolltolower() {
				if (this.tablist[this.tabIndex].loadtext != '上拉加载更多') return
				this.tablist[this.tabIndex].loadtext = '正在加载中.....'
			
				setTimeout(() => {
					this.tablist[this.tabIndex].list = this.tablist[this.tabIndex].list.concat(...this.tablist[this.tabIndex].list)
					this.tablist[this.tabIndex].loadtext = '上拉加载更多'
				}, 1000)
			},
			// 点击tab项(index下标)
			handleTabItemClick(index) {
				this.tabIndex = index
			},
		}
	}
</script>

<style scoped>

</style>
